<%--
  Created by IntelliJ IDEA.
  User: sunhao
  Date: 2015/10/9 0009
  Time: 下午 1:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>

<html>
<head>
    <title>商品列表</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%--<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">--%>
    <link href="/static/bui/css/bs3/dpl.css" rel="stylesheet" type="text/css"/>
    <link href="/static/bui/css/bs3/bui.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="doc-content">
    <div class="panel">
        <div class="panel-header">
            <h3>商品列表</h3>
        </div>
    </div>
    <form id="searchForm" class="form-horizontal well" action="/goods/find" method="post">
        <div class="row">
            <div class="control-group span8">
                <label class="control-label">商品名称：</label>

                <div class="controls">
                    <input type="text" class="control-text" name="name">
                </div>
            </div>
            <div class="control-group span8">
                <label class="control-label" data-rules="{required:true}">入库开始日期：</label>
                <div class="controls">
                    <input type="text" class="calendar" name="storage_startDate" style="width: auto"/>
                </div>
            </div>
            <div class="control-group span8">
                <label class="control-label" data-rules="{required:true}">入库结束日期：</label>
                <div class="controls">
                    <input type="text" class="calendar" name="storage_endDate" style="width: auto"/>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span8">
                <label class="control-label" data-rules="{required:true}">出库开始日期：</label>
                <div class="controls">
                    <input type="text" class="calendar" name="delivery_startDate" style="width: auto"/>
                </div>
            </div>
            <div class="control-group span8">
                <label class="control-label" data-rules="{required:true}">出库结束日期：</label>
                <div class="controls">
                    <input type="text" class="calendar" name="delivery_endDate" style="width: auto"/>
                </div>
            </div>
            <div class="control-group span8">
                <div class="controls">
                    <label class="control-label" data-rules="{required:true}">商品售出状态：</label>
                    <select name="status">
                        <option value="">请选择</option>
                        <option value="in">未售出</option>
                        <option value="out">已售出</option>
                    </select>
                </div>
            </div>
            <div class="span3 offset2">
                <input value="搜索" type="submit" id="btnSearch" class="button button-primary"/>
            </div>
        </div>
    </form>
    <div class="panel-body">
        <div class="row">
            <div class="span21 offset3 control-row-auto">
                <div id="grid"></div>
                <input type="hidden" name="goods">
            </div>
        </div>
    </div>
    </div>
    <script type="text/javascript" src="/static/bui/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="/static/bui/js/bui.js"></script>
    <script type="text/javascript" src="/static/bui/js/config.js"></script>
    <script type="text/javascript">

        BUI.use('bui/calendar', function (Calendar) {
            var datepicker = new Calendar.DatePicker({
                trigger: '.calendar',
                autoRender: true
            })
        })

        BUI.use(['bui/grid', 'bui/data', 'bui/form'], function (Grid, Data, Form) {
            var columns = [
                        {title: '商品编号', dataIndex: 'num', width: '25%'},
                        {title: '商品名称', dataIndex: 'name', width: '25%'},
                        {title: '预售价', dataIndex: 'price', width: '10%'},
                        {title: '入库时间', dataIndex: 'storageDate', width: '15%'},
                        {title: '出库时间', dataIndex: 'deliveryDate', width: '15%'},
                        {
                            title: '操作', renderer: function () {
                            var infoStr = '<span  class="grid-command btn-info"><i class="icon-info-sign"></i>详情</span>'
                            return infoStr}
                        }
                    ],
            //默认的数据
                    data = [
                        <c:forEach items="${goods}" var="r">
                        {
                            _id: '${r._id}',
                            name: '${r.name}',
                            price: '${r.price}',
                            num: '${r.num}',
                            storageDate:'${r.storageDate}',
                            deliveryDate:'${r.deliveryDate}'
                        },
                        </c:forEach>
                    ],
                    store = new Data.Store({
                        data: data,
                        pageSize: 20
                    }),
                    editing = new Grid.Plugins.DialogEditing({
                        contentId: 'content',
                        triggerCls: 'btn-edit',
                        editor: {
                            focusable: false,
                            success: function () {
                                var editType = editing.get('editType'),
                                        edtor = this,
                                        form = edtor.get("form");
                                form.valid();
                                if (form.isValid()) {
                                    this.close()
                                }
                            }
                        }
                    }),
                    grid = new Grid.Grid({
                        render: '#grid',
                        columns: columns,
                        width: '100%',
//                    forceFit: true,
                        plugins: [Grid.Plugins.AutoFit],
                        store: store,
                        bbar: {
                            pagingBar: true,
                            elCls: 'image-pbar'
                        },
                        plugins: [Grid.Plugins.CheckSelection, editing],
                        tbar: {
                            items: []
                        }
                    });
            grid.render();

            grid.on('cellclick', function (ev) {
                var record = ev.record,
                        target = $(ev.domTarget);
                if (target.hasClass('btn-info')) {
                    window.location.href = '/goods/info?goodsId=' + record._id;
                }
            })

            var form = new Form.HForm({
                srcNode: '#J_Form'
            });
        });
    </script>
</div>
</div>
</div>
</body>
</html>
